<template>

  <div style="width: 100%">
    <div>
      <el-input v-model="pagination.userName" placeholder="姓名" style="width: 200px;" class="filter-item"></el-input>
      <el-input v-model="pagination.phone" placeholder="手机号" style="width: 200px;" class="filter-item"></el-input>

      <el-button @click="getAll()" class="delfBut">查询</el-button>
      <el-button @click="reload()" class="delfBut">全部</el-button>
    </div>


    <el-table
        v-loading="loading"
        current-row-key="aid"
        :data="dataList"
        style="width: 100%"
    >
      <el-table-column align="center"
                       type="index"
                       label="序号">
      </el-table-column>
      <el-table-column align="center"
                       prop="userName"
                       label="姓名">
      </el-table-column>
      <el-table-column align="center"
                       prop="gender"
                       label="性别">
      </el-table-column>
      <el-table-column align="center"
                       prop="phone"
                       label="电话">
      </el-table-column>
      <el-table-column align="center"
                       prop="email"
                       label="邮箱">
      </el-table-column>


      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

        </template>
      </el-table-column>


    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
          class="pagiantion"

          @current-change="handleCurrentChange"

          :current-page="pagination.currentPage"

          :page-size="pagination.pageSize"

          layout="total, prev, pager, next, jumper"

          :total="pagination.total">

      </el-pagination>
    </div>


    <!--  编辑弹窗  -->
    <div class="add-form">

      <el-dialog title="添加用户" :visible.sync="dialogFormVisibleEdit">

        <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">

          <el-row>
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="formData.userName"/>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="手机号">
              <el-input v-model="formData.phone"></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="邮箱">
              <el-input v-model="formData.email"></el-input>
            </el-form-item>
          </el-row>


        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>

        </div>

      </el-dialog>
    </div>

  </div>
</template>

<script>
const axios = require('axios');
export default {
  name: "AdminInfo",

  data() {
    return{
      dataList: [],//当前页要展示的列表数据
      formData: {},//添加所用表单
      dialogFormVisibleEdit: false,
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 9,//每页显示的记录数
        total: 0,//总记录数
        userName: "",
        phone: ""
      },
      loading: true,
    }
  },
  created() {
    this.getAll();
  },
  methods: {
    //分页查询
    getAll() {
      // 组织参数，拼接url请求地址
      var paramStr = "?userName=" + this.pagination.userName
          + "&phone=" + this.pagination.phone;
      console.log(paramStr);
      axios.get("/admin-service/page/" + this.pagination.currentPage + "/" + this.pagination.pageSize + paramStr).then(res => {
        console.log(res.data.data);
        this.pagination.currentPage = res.data.data.current;
        this.pagination.pageSize = res.data.data.size;
        this.pagination.total = res.data.data.total;
        this.dataList = res.data.data.records;
        this.loading = false;
      });
    },
    //切换页码
    handleCurrentChange(currentPage) {
      // 修改页码值为当前选中的页码值
      this.pagination.currentPage = currentPage;
      // 执行查询
      this.getAll();
    },
    //重新加载所有内容
    reload() {
      this.pagination.userName = '';
      this.pagination.phone = '';
      this.getAll();
    },
    //删除所选行
    handleDelete(row){
      // console.log(row);
      this.$confirm("删除的数据将不可恢复，是否继续？", "提示", {type: "info"}).then(() => {
        axios.delete("/admin-service/delete/" + row.aid).then(res => {
          console.log(row.aid);
          console.log(res.data)
          if (res.data.flag) {
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        }).finally(() => {
          this.getAll();
        });
      }).catch(() => {
        this.$message.info("取消操作");
      });
    },
    //取消
    cancel(){
      this.dialogFormVisibleEdit = false;
      this.dialogFormVisibleShow = false;
      this.$message.info("当前操作取消！");
    },

    //修改
    handleEdit() {
      axios.put("/admin-service/update", this.formData).then(res => {
        // 判断当前操作是否成功
        if(res.data.flag) {
          // 1.关闭弹层
          this.dialogFormVisibleEdit = false;
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      }).finally(() => {
        // 2.重新加载数据
        this.formData = {};
        this.getAll();
      });
    },
    //弹出编辑窗口
    handleUpdate(row) {
      // 发送异步请求
      axios.get("/admin-service/show/" + row.aid).then(res => {
        // console.log(res.data);
        if (res.data.flag && res.data.data != null) {
          this.dialogFormVisibleEdit = true;
          this.formData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).finally(() => {
        this.getAll();
      });
    },

  }

}
</script>


<style scoped>
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>